<template>
    <div class="entity-info">
        <template v-if="!nodeInfo">
            <div class="e-i-base-info">
                <div class="e-i-base-info-title">{{ $t("tool.scenarioEdit.baseInfo") }}</div>
                <div class="e-i-base-info-content">
                    <div class="e-i-base-info-content__item">
                        <span>{{ $t("tool.scenarioEdit.category") }}: </span>
                        <span>{{ form.categoryName }}({{ form.categoryCode }})</span>
                    </div>
                    <div class="e-i-base-info-content__item">
                        <span>{{ $t("tool.scenarioEdit.version") }}: </span>
                        <span>{{ form.mainVersionId }}</span>
                    </div>
                    <div class="e-i-base-info-content__item">
                        <span>{{ $t("tool.scenarioEdit.model") }}:</span>
                        <el-select v-model="form.model" placeholder="请选择">
                            <el-option v-for="item in modelingOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="e-i-base-info-content__item">
                        <span>{{ $t("tool.scenarioEdit.side") }}:</span>
                        <el-select v-model="form.side" :disabled="!nodeInfo || nodeInfo.parentId != 0" placeholder="请选择">
                            <el-option v-for="item in sideOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>

                </div>
            </div>

            <div class="e-i-attr-info">
                <div class="e-i-attr-info-title">{{ $t("tool.scenarioEdit.attrInfo") }}</div>
                <div class="e-i-attr-info-content">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane :label="$t('tool.scenarioEdit.baseAttr')" name="first">
                            <div class="e-i-attr-info-content-item">
                                <VueForm ref="baseAttributeJsonSchemaForm" :formProps="formProps"
                                    :formFooter="formFooter" :schema="tempData.basicAttributeJsonSchemaData"
                                    v-model="tempData.basicAttributeJsonData">
                                </VueForm>
                            </div>

                        </el-tab-pane>
                        <el-tab-pane :label="$t('tool.scenarioEdit.extraAttr')" name="second">
                            <div class="e-i-attr-info-content-item">
                                <VueForm ref="extraAttributeJsonSchemaForm" :formProps="formProps"
                                    :formFooter="formFooter" :schema="tempData.modelAttributeJsonSchemaData"
                                    v-model="tempData.modelAttributeJsonData">
                                </VueForm>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane :label="$t('tool.scenarioEdit.modelAttr')" name="third">

                        </el-tab-pane>
                        <el-tab-pane :label="$t('tool.scenarioEdit.targetAttr')" name="fourth">

                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div class="e-i-footer">
                <el-button class="jtyj-btn-primary" @click="submitForm">{{ $t("setup.buttonText.save") }}</el-button>
            </div>
        </template>
        <template v-else>
            <el-empty description="请选择实体"></el-empty>
        </template>

    </div>

</template>
<script>
import { getModelingList } from "@/api/myspace/model-manage-tool/model-manage";
import jsonSchemaToolHandle from "@/utils/jsonSchema-tool.js";
import VueForm from '@lljj/vue-json-schema-form';
export default {
    name: "EntityInfo",
    data() {
        return {
            activeName: "first",
            form: {},
            entityInfo: {},
            modelingOptions: [],
            sideOptions: [
                {
                    label: '红方',
                    value: '1'
                },
                {
                    label: '蓝方',
                    value: '2'
                }
            ],
            formFooter: {
                show: false, // 是否显示默认底部
                okBtn: '保存', // 确认按钮文字
                cancelBtn: '取消' // 取消按钮文字
            },
            formProps: {
                layoutColumn: 1, // 1 2 3 ，支持 1 2 3 列布局，如果使用inline表单这里配置无效
                inline: true, // 行内表单模式，建议：开启时labelPosition不要配置top, antd不要配置labelCol wrapperCol
                inlineFooter: false, // 如果想要保存按钮和表单元素一行显示，需要配置 true
                labelSuffix: '：', // label后缀
                labelPosition: 'left', // 表单域标签的位置
                isMiniDes: true, // 是否优先mini形式显示描述信息（label文字和描述信息同行显示）
                defaultSelectFirstOption: true, // 单选框必填，是否默认选中第一个
                popover: {}, // 透传给ui 组件库的popver组件，比如element ui Popover，antd a-popover
            },
            tempData: {
                "basicAttributeJsonSchemaData": {
                    "type": "object",
                    "properties": {
                        "chineseName": {
                            "type": "string",
                            "description": "中文名称",
                            "title": "中文名称"
                        },
                        "englishName": {
                            "type": "string",
                            "description": "英文名称",
                            "title": "英文名称"
                        },
                        "coordinates": {
                            "type": "object",
                            "properties": {
                                "x": {
                                    "type": "number",
                                    "description": "经度",
                                    "title": "经度",
                                    "default": 0
                                },
                                "y": {
                                    "type": "number",
                                    "description": "纬度",
                                    "title": "纬度",
                                    "default": 0
                                },
                                "z": {
                                    "type": "number",
                                    "description": "高度",
                                    "title": "高度",
                                    "default": 0
                                }
                            },
                            "x-apifox-orders": [
                                "x",
                                "y",
                                "z"
                            ],
                            "description": "位置(经纬高)",
                            "required": [
                                "x",
                                "y",
                                "z"
                            ],
                            "title": "位置"
                        },
                        "modelStepSize": {
                            "type": "number",
                            "description": "步长",
                            "title": "步长",
                            "default": 0
                        },
                        "currentHealth": {
                            "type": "number",
                            "description": "血量",
                            "title": "血量",
                            "default": 0
                        }
                    },
                    "x-apifox-orders": [
                        "chineseName",
                        "englishName",
                        "coordinates",
                        "modelStepSize",
                        "currentHealth"
                    ],
                    "required": [
                        "chineseName",
                        "englishName",
                        "coordinates",
                        "modelStepSize",
                        "currentHealth"
                    ]
                },
                "basicAttributeJsonData": {
                    "chineseName": "测试",
                    "englishName": "test",
                    "currentHealth": "111",
                    "coordinates": {
                        "x": 3,
                        "y": 2,
                        "z": 2
                    },
                    "modelStepSize": "11"
                },
                "modelAttributeJsonSchemaData": {
                    "type": "object",
                    "properties": {
                        "RCS": {
                            "type": "string",
                            "title": "雷达横截面"
                        },
                        "bulletLength": {
                            "type": "number",
                            "title": "xx长度"
                        },
                        "maximumSpeed": {
                            "type": "number",
                            "title": "最大速度"
                        },
                        "Cheng": {
                            "type": "string"
                        }
                    },
                    "x-apifox-orders": [
                        "RCS",
                        "bulletLength",
                        "maximumSpeed",
                        "Cheng"
                    ],
                    "x-apifox-refs": {},
                    "required": [
                        "4A8328099B43468289ADB45B51"
                    ]
                },
                "modelAttributeJsonData": {
                    "RCS": "do qui",
                    "bulletLength": 40342358.5442957,
                    "maximumSpeed": -10574089.260701314,
                    "Cheng": "Lorem dolore"
                }
            }
        }
    },
    components: {
        VueForm
    },
    props: {
        nodeInfo: {
            type: Object,
        }
    },
    watch: {
        nodeInfo: {
            handler(newValue, oldValue) {
                if (!newValue) return;
                this.form = newValue.data;
                this.form.categoryName = this.form.modelName;
                console.log(this.form);
            },
            immediate: true,
            deep: true,
        },
    },

    methods: {
        //获取参数化建模列表
        getParametricModelingList() {
            getModelingList({
                modelId: this.form.modelId,
                mainVersionId: this.form.mainVersionId,
            }).then((response) => {
                if (response.code == 200) {
                    this.modelingOptions = response.rows;
                }
            });
        },
        handleClick() {
            console.log("handleClick");
        },

        // 提交表单
        submitForm() {
            this.$emit('submit', this.form);
        }
    }
};
</script>

<style lang="scss" scoped>
.entity-info {
    padding-left: 10px;
    height: calc(100% - 10px);

    .e-i-base-info-title,
    .e-i-attr-info-title {
        font-size: var(--ui-font-size-semi-lg);
        font-weight: var(--ui-font-weight-bold);
        color: var(--app-text-fg-low);
        margin-top: 10px;
    }

    .e-i-attr-info-title {
        margin-top: 20px;
    }

    .e-i-base-info-content {
        display: flex;
        flex-wrap: wrap;
        font-size: var(--ui-font-size-base);

        .e-i-base-info-content__item {
            margin-right: 20px;
            margin-top: 20px;
            height: 20px;
            line-height: 20px;
            display: flex;
            align-items: center;

            & span {
                width: 60px;
            }

            & span:nth-child(1) {
                margin-right: 5px;
            }

            & .el-link {
                color: var(--app-primary-base);
                font-size: var(--ui-font-size-base);
            }

            & ::v-deep .el-input {
                width: 150px;


                .el-input__inner {
                    padding: 2px 4px;
                    height: 30px;
                    line-height: 30px;
                }
            }

        }
    }
}

.e-i-footer {
    padding: 10px 0 0 300px;
    position: absolute;
    width: 100%;
    height: 56px;
    border-top: 1px solid var(--ui-border-color-split);
    bottom: 0px;

}
</style>